<template>
	<div class="home" >
		<div class="d-flex pl-1 pr-1 a-center j-center pt-1" style="height: 50px;">
			<div style="" class="d-flex a-center j-center"> <img src="../assets/images/info.png" alt="" class="w-100 pr-1"></div>
			<div style="width: 80%; height: 100%;" @click="search"> <input type="text" class="w-100 search" readonly style="height: 100%;" placeholder="智能积木越野四驱车"> </div>
			<div style=""  class="d-flex a-center j-center"> <img src="../assets/images/code.png" alt=""  class="w-100 pl-1"></div>
		</div>
		<van-tabs @click="selectPage">
			<van-tab v-for="item in categorylist" :title="item.name" :key="item.id">
				<div v-for="(val, i) in contanter" :key="i+''">
					<!-- 轮播图 -->
					<swiper :swipers="val.data" v-if="val.type==='swiper'"></swiper>
					<!-- indexnav -->
					<indexnavs :indexnav="val.data" v-if="val.type==='indexnavs'"></indexnavs>
					<!--三栏布局 -->
					<threeadv :threeadv="val.data" v-if="val.type==='threeAdv'"></threeadv>
					<div v-if="val.type==='oneAdv'" class="pl-2 pt-1 pb-1">
						<div style="font-weight: 600; font-size: 1.2rem;">{{val.data.title}}</div>
					</div>
					<!-- 列表 -->
					<list v-if="val.type==='list'" :list="val.data"></list>
				</div>
			</van-tab>
		</van-tabs>
		<div style="height: 50px;"></div>
	</div>
</template>

<script>
	import {
		category,
		categoryPage
	} from '../lib/home'
	import Swiper from '../components/swipers/index'
	import indexnavs from '../components/indexnav/index'
	import threeadv from '../components/threeAdv/index.vue'
	import price from '../components/price/index.vue'
	import list  from '../components/list/index.vue'
	export default {
		name: 'Home',
		data() {
			return {
				categorylist: [],
				contanter: []
			}
		},
		created() {
			this.init(1, 1)
		},
		mounted() {

			category().then(res => {
				if (res.msg === 'ok') {
					this.categorylist = res.data.category
				}
			})
		},
		methods: {
			init(id, page) {
				categoryPage({
					id: id,
					page: page
				}).then(res => {
					console.log(res)
					if (res.data.length != 0) {
						this.contanter = res.data
					} else {
						this.contanter = []
					}
				})
			},
			selectPage(index) {
				let _id = this.categorylist[index].id
				this.init(_id, 1)
			},
			search(){
				this.$router.push({
					 name:"Search"
				})
			}
		},
		components: {
			Swiper,
			indexnavs,
			threeadv,
			price,
			list
		}
	}
</script>
<style scoped>
	.search{
		 border:1px solid #f5f5f5;
		 background-color: #F5F5F5;
		 border-radius: 5px;
	}
	
</style>
